<template>
	<view class="classlist">
		
		<!-- 加载骨架屏 -->
		<view class="loadingLayout">
			<uni-load-more status="loading" v-if="!classList.length && !noData"></uni-load-more>
		</view>
	
		<view class="content">
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>	
		
		<!-- 加载骨架屏 -->
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'" ></uni-load-more>
		</view>
		
		<!-- 安全区 -->
		<view class="safe-area-inset-bottom"></view>
		
	</view>
</template>

<script setup>
import { ref }  from 'vue';
import { onLoad , onReachBottom,onShareAppMessage ,onShareTimeline  } from '@dcloudio/uni-app'
import { apiGetClassList } from '@/api/apis.js'
const classList = ref([]);
const noData = ref(false);
const queryParams = {
	pageNum:1,
	pageSize:12
};

const pageName = ref()
onLoad((e)=>{ 
	console.log(e);	
	let { id=null ,name=null} = e
	queryParams.classid = id;
	pageName.name = name;
	console.log(id,name);
	
	uni.setNavigationBarTitle({
		title: name
	})
	
	getClassList();
})

const getClassList = async ()=>{ 
	let res = await apiGetClassList(queryParams);
	classList.value =[...classList.value, ...res.data];
	
	uni.setStorageSync("storageClassList",classList.value);
	
	if(queryParams.pageSize > res.data.length){
		noData.value = true;
	}
	
	console.log(res.data);
}

onReachBottom(()=>{
	if(noData.value){
		return;
	}
	queryParams.pageNum++;
	getClassList();
})


//分享给好友
onShareAppMessage((e)=>{
	return {
		title: "我来看壁纸"+pageName.value,
		path: "/pages/classlist/classlist?id="+queryParams.classid+"&name="+pageName.name
	}
})


// 分享到朋友圈
onShareTimeline(()=>{
	return {
		title: "我来看壁纸"+pageName.value,
		query:" id="+queryParams.classid+"&name="+pageName.name
	}
})

</script>

<style lang="scss" scoped>
.classlist{
	.content{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 5rpx;
		padding: 5rpx;
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;	
				display: block;
			}
		}
	}
}
</style>
